<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>儿童节</title>

		<!-- Bootstrap -->
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->

		<!-- swiper 3 -->
		<link href="swiper/3.3.1/swiper.min.css" rel="stylesheet">

		<link href="style.css" rel="stylesheet">
		<style type="text/css">
			.loadingpage{
				position: fixed;
				left: 0px;
				top:0px;
				width: 100%;
				height: 100%;
				background-image: url(img/b.gif);
				background-position: 50%;
				background-size: contain;
				background-repeat: no-repeat;
				background-color: #22202d;
				z-index: 1;
			}
		</style>
		<script type="text/javascript">
			setTimeout(function(){
				document.getElementById("loadingpage").style.display="none";
			},2000);
		</script>
	</head>
	<body>
		<div class="loadingpage" id="loadingpage"></div>
		<div class="container index-container">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-no-swiping">
						<!-- 首页 -->
						<div class="homepage">
							<div class="start">
								<div class="start-btn"></div>
							</div>
							<div class="home-container">
								<div class="title"></div>
							</div>
							<div class="catoon-position sailormoon"></div>
							<div class="catoon-position keroro"></div>
							<div class="catoon-position home-table"></div>
							<div class="catoon-position tv-table">
								<div class="tv-td">
									<div class="tv-img"></div>
								</div>
							</div>
							<div class="catoon-position front-caton"></div>
							<div class="catoon-position powerpuff"></div>
						</div>
					</div>
					<div class="swiper-slide swiper-no-swiping">
						<div class="level level-one">
							<div class="subject">
								<span>LEVEL 1</span>
								<p id="title1"></p>
							</div>
							<div class="catoon-position home-table"></div>
							<div class="catoon-position tv-table">
								<div class="tv-td">
									<div class="tv-img" id="tv-img1"></div>
								</div>
							</div>

							<div class="chiose">
								<div class="row">
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelone">
											<p><span class="serial">A</span> <span id="result11"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelone">
											<p><span class="serial">B</span> <span id="result12"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelone">
											<p><span class="serial">C</span> <span id="result13"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelone">
											<p><span class="serial">D</span> <span id="result14"></span></p>
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide swiper-no-swiping">
						<!-- 第二题 -->
						<div class="level level-two">
							<div class="subject">
								<span>LEVEL 2</span>
								<p id="title2"></p>
							</div>
							
							<div class="catoon-position home-table"></div>
							<div class="catoon-position tv-table">
								<div class="tv-td">
									<div class="tv-img" id="tv-img2"></div>
								</div>
							</div>
						
							<div class="chiose">
								<div class="row">
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="leveltwo">
											<p><span class="serial">A</span> <span id="result21"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="leveltwo">
											<p><span class="serial">B</span> <span id="result22"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="leveltwo">
											<p><span class="serial">C</span> <span id="result23"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="leveltwo">
											<p><span class="serial">D</span> <span id="result24"></span></p>
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide swiper-no-swiping">
						<!-- 第三题 -->
						<div class="level level-three">
							<div class="subject">
								<span>LEVEL 3</span>
								<p id="title3"></p>
							</div>

							
							<div class="catoon-position home-table"></div>
							<div class="catoon-position tv-table">
								<div class="tv-td">
									<div class="tv-img" id="tv-img3"></div>
								</div>
							</div>
							

							<div class="chiose">
								<div class="row">
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">A</span> <span id="result31"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">B</span> <span id="result32"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">C</span> <span id="result33"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">D</span> <span id="result34"></span></p>
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide swiper-no-swiping">
						<!-- 第四题 -->
						<div class="level level-four">
							<div class="subject">
								<span>LEVEL 4</span>
								<p id="title4"></p>
							</div>

							<div class="catoon-position home-table"></div>
							<div class="catoon-position tv-table">
								<div class="tv-td">
									<div class="tv-img" id="tv-img4"></div>
								</div>
							</div>

							<div class="chiose">
								<div class="row">
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">A</span> <span id="result41"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">B</span> <span id="result42"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">C</span> <span id="result43"></span></p>
										</label>
									</div>
									<div class="col-xs-6 radio">
										<label>
											<input type="radio" name="levelthree">
											<p><span class="serial">D</span> <span id="result44"></span></p>
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide swiper-no-swiping slide-result">
						<div class="waitting">
							
						</div>
						<div class="resulit" style="display:none;">
							<div class="subject">
								<h3 id="titler"></h3>
								<p id="resultr1"></p>
								<p id="resultr2"></p>
							</div>
							<div class="catoon-position home-table"></div>
							<div class="catoon-position tv-table">
								<div class="tv-td">
									<div class="tv-img" id="tv-imgr"></div>
								</div>
							</div>
							<div class="subject-bottom">
								<div class="alert alert-warning"  id="resultr3"></div>
								<div class="remote">
									<button class="btn share-btn">我要分享</button>
									<a href="" class="btn replay-btn">我要重来</a>
								</div>
							</div>
						</div>
						<div class="share" style="display:none;">
							<div class="share-tips"></div>
							<div class="share-bottom">
								<div class="share-back"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="bootstrap/js/jquery.min.2.2.4.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!-- swiper 3 -->
		<script src="swiper/3.3.1/swiper.jquery.min.js"></script>

		<script type="text/javascript">
			$(document).ready(function(){
				$(".index-container").height($(window).height());
				$(window).resize(function(){
					$(".index-container").height($(window).height());
				})
				var mySwiper = new Swiper ('.swiper-container', {
					direction: 'vertical',
					loop: false,
					//effect : 'fade',
					noSwiping : true,
					nextButton:'.level .chiose .row .col-xs-6 label',
				});
				$(".start").click(function(){
					mySwiper.slideTo(1, 500, false);
				});

				$(".level .chiose .row .col-xs-6 label").click(function(){	
					event.stopPropagation();					
					$(this).attr("style","background-color:#3498db;");
					$(this).find(".serial").attr("style","color:#3498db;");
				});

				$(".level-four .chiose .row .col-xs-6 label").click(function(){
					var waitting = setTimeout(function(){
						$(".waitting").attr("style","display:none;");
						$(".resulit").removeAttr("style");
					},2850);
				});
			});

			/*随机选套题*/
			function random(){
				var tvImg1=document.getElementById("tv-img1");
				var Title1=document.getElementById("title1");
				var Result11=document.getElementById("result11");
				var Result12=document.getElementById("result12");
				var Result13=document.getElementById("result13");
				var Result14=document.getElementById("result14");

				var tvImg2=document.getElementById("tv-img2");
				var Title2=document.getElementById("title2")
				var Result21=document.getElementById("result21");
				var Result22=document.getElementById("result22");
				var Result23=document.getElementById("result23");
				var Result24=document.getElementById("result24");

				var tvImg3=document.getElementById("tv-img3");
				var Title3=document.getElementById("title3")
				var Result31=document.getElementById("result31");
				var Result32=document.getElementById("result32");
				var Result33=document.getElementById("result33");
				var Result34=document.getElementById("result34");

				var tvImg4=document.getElementById("tv-img4");
				var Title4=document.getElementById("title4")
				var Result41=document.getElementById("result41");
				var Result42=document.getElementById("result42");
				var Result43=document.getElementById("result43");
				var Result44=document.getElementById("result44");

				var random = parseInt(Math.floor(Math.random()*3 + 1));
				if(random == 1){
					tvImg1.style.backgroundImage="url(img/latiao.gif)";
					Title1.innerHTML="你不小心吃辣条噎到，殊不知既触发了穿越的条件，快决定去哪！";
					Result11.innerHTML="火影村";
					Result12.innerHTML="尸魂界";
					Result13.innerHTML="葫芦山";
					Result14.innerHTML="数码世界";

					tvImg2.style.backgroundImage="url(img/baishi.gif)";
					Title2.innerHTML="你穿越之后成为了人，碰巧福利日抽到一张万能拜师卡，你决定师从……？";
					Result21.innerHTML="龟仙人";
					Result22.innerHTML="好色仙人自来也";
					Result23.innerHTML="智慧女神雅典娜";
					Result24.innerHTML="美少女战士";

					tvImg3.style.backgroundImage="url(img/shiwu.gif)";
					Title3.innerHTML="当你神功大成之后，你决定去往世界冒险，而在冒险的时候遇到了白雪公主，第一眼就让你惊为天人，于是你决定请她吃点什么";
					Result31.innerHTML="毒苹果";
					Result32.innerHTML="毒奶粉";
					Result33.innerHTML="皮鞋凤爪";
					Result34.innerHTML="6元麻辣烫";

					tvImg4.style.backgroundImage="url(img/ae86.gif)";
					Title4.innerHTML="你爱上了白雪公主，你希望成为哪种老司机来迎娶她？";
					Result41.innerHTML="高达";
					Result42.innerHTML="筋斗云";
					Result43.innerHTML="柯南牌太阳能滑板";
					Result44.innerHTML="AE86";
				}else if(random == 2){
					tvImg1.style.backgroundImage="url(img/caihongqiao.gif)";
					Title1.innerHTML="一天你捡到了一根骨骼精奇的树枝，殊不知这居然是世界树的树枝，于是你无意打开了彩虹桥，选择去哪吧！";
					Result11.innerHTML="那美克星";
					Result12.innerHTML="黄道十二宫";
					Result13.innerHTML="伟大航道";
					Result14.innerHTML="春田花花幼稚园";

					tvImg2.style.backgroundImage="url(img/bishaji.gif)";
					Title2.innerHTML="凑巧碰到世界第一武道会开始了，正所谓生活就是瞎凑热闹，你决定用种子积分换一个必杀技参加比赛，你要换……？";
					Result21.innerHTML="龟波气功";
					Result22.innerHTML="天马流星拳";
					Result23.innerHTML="卍解";
					Result24.innerHTML="动感光波";

					tvImg3.style.backgroundImage="url(img/juesai.gif)";
					Title3.innerHTML="武道会的决赛居然是黑暗料理决赛，你决定用哪一样黑暗料理力压群雄？";
					Result31.innerHTML="魔幻麻婆豆腐";
					Result32.innerHTML="菠菜罐头";
					Result33.innerHTML="铜锣烧";
					Result34.innerHTML="鸭脖";

					tvImg4.style.backgroundImage="url(img/haizewang.gif)";
					Title4.innerHTML="最终你获得了武道会的冠军，可以继承一个王者之位，你决定要成为……？";
					Result41.innerHTML="海贼王";
					Result42.innerHTML="游戏王";
					Result43.innerHTML="界王";
					Result44.innerHTML="奥特曼之王";
				}else if(random == 3){
					tvImg1.style.backgroundImage="url(img/lamian.gif)";
					Title1.innerHTML="某次夜宵时分，你突发奇想地在7-11买了七碗拉面，并对着夜空中的星大喊：”出来吧神龙！”好吧你中奖了，神龙说由于馒头质量较差，只能满足传送你去一个地方的愿望，你要去哪？";
					Result11.innerHTML="秋名山";
					Result12.innerHTML="神盾局";
					Result13.innerHTML="M78星云";
					Result14.innerHTML="大雄房间的抽屉";

					tvImg2.style.backgroundImage="url(img/lingdao.gif)";
					Title2.innerHTML="你来到了当地的杂草世界分部工作，你希望跟随哪位领导？";
					Result21.innerHTML="大蛇丸";
					Result22.innerHTML="唐三藏";
					Result23.innerHTML="擎天柱";
					Result24.innerHTML="白胡子";

					tvImg3.style.backgroundImage="url(img/koman.gif)";
					Title3.innerHTML="你在某个风雪交加的夜晚出差，被困在了某个别墅同时理所当然的遇到了命案，你决定模仿某个大神来破案，你选择……？";
					Result31.innerHTML="柯南";
					Result32.innerHTML="黑猫警长";
					Result33.innerHTML="金田一";
					Result34.innerHTML="福尔摩斯";

					tvImg4.style.backgroundImage="url(img/pikaqiu.gif)";
					Title4.innerHTML="成功破案之后，你意识到了生命的宝贵，你决定要保护世界和平，最后你选择成为……？";
					Result41.innerHTML="神奇宝贝大师";
					Result42.innerHTML="忍者神龟";
					Result43.innerHTML="大力水手";
					Result44.innerHTML="国家炼金术师";
				}
				console.log(random);
			}


			/*结果*/
			function titleResult(){	
				var tvImgr=document.getElementById("tv-imgr");
				var Titler=document.getElementById("titler")
				var Resultr1=document.getElementById("resultr1");
				var Resultr2=document.getElementById("resultr2");
				var Resultr3=document.getElementById("resultr3");
				var Resultr4=document.getElementById("resultr4");
				var Resultr5=document.getElementById("resultr5");
				var Resultr6=document.getElementById("resultr6");
				var Resultr7=document.getElementById("resultr7");
				var Resultr8=document.getElementById("resultr8");
				var Resultr9=document.getElementById("resultr9");
				var Resultr10=document.getElementById("resultr10");
				//创建行
				var TitlerArray=new Array();
				//创建列
				TitlerArray[0]=new Array();
				TitlerArray[1]=new Array();
				TitlerArray[2]=new Array();
				TitlerArray[3]=new Array();
				TitlerArray[4]=new Array();
				TitlerArray[5]=new Array();
				TitlerArray[6]=new Array();
				TitlerArray[7]=new Array();
				TitlerArray[8]=new Array();
				TitlerArray[9]=new Array();
				//列举数据
				TitlerArray[0][0]="img/r1.jpg";
				TitlerArray[0][1]="孙悟空";
				TitlerArray[0][2]="《龙珠》";
				TitlerArray[0][3]="「我肚子饿了……」";
				TitlerArray[0][4]="<span>龟派气功</span>——由龟仙人所创的绝技，使用时用双手合成花萼状，把花萼手放在腰间，在双手掌心聚出一个光球，然后大喊“龟…派…气…功！”";

				TitlerArray[1][0]="img/r2.jpg";
				TitlerArray[1][1]="星马豪";
				TitlerArray[1][2]="《四驱兄弟》";
				TitlerArray[1][3]="「冲啊，跃动冲锋！」";
				TitlerArray[1][4]="<span>冲啊，跃动冲锋！</span>——跃动炸弹为跃动冲锋龙卷风落地后再次起跳。（每次只要进入比赛状态小豪的奔跑速度总能跟得上时速达到60km/h的四驱车，并且还能声控四驱车加速)";

				TitlerArray[2][0]="img/r3.jpg";
				TitlerArray[2][1]="大空翼";
				TitlerArray[2][2]="《足球小将》";
				TitlerArray[2][3]="「足球是我的朋友！足球是我的梦想！」";
				TitlerArray[2][4]="<span>冲力倒挂金钩</span>——在最重要的时刻主角光环一定爆发，在谁都想不到的情况下一定能一记倒挂金钩超远距离射进龙门，然后震惊全场！";

				TitlerArray[3][0]="img/r4.jpg";
				TitlerArray[3][1]="大娃";
				TitlerArray[3][2]="《葫芦兄弟》";
				TitlerArray[3][3]="「妖精！放了我爷爷！」";
				TitlerArray[3][4]="<span>巨大化</span>——天生神力，无所不能，可以随意变大缩小，可惜有勇无谋。";

				TitlerArray[4][0]="img/r5.jpg";
				TitlerArray[4][1]="小智";
				TitlerArray[4][2]="《神奇宝贝》";
				TitlerArray[4][3]="「就决定是你了！皮卡丘！」";
				TitlerArray[4][4]="<span>去吧精灵球！</span>——训练师需要抛出球击中野生神奇宝贝，才可以确定目标并收复。球在进行“接收”操作时，球会发出红光包裹神奇宝贝。不同之处在于，收复野生精灵时必须击中它，而收回神奇宝贝时只需让红光照射神奇宝贝即可。";

				TitlerArray[5][0]="img/r6.jpg";
				TitlerArray[5][1]="月野兔";
				TitlerArray[5][2]="《美少女战士》";
				TitlerArray[5][3]="「我要代表月亮，消灭你！」";
				TitlerArray[5][4]="<span>Moon Tiara Boomerang</span>——变身为水手月亮之后，拿着月之冕，大喊咒语，消灭邪恶的妖魔！";

				TitlerArray[6][0]="img/r7.jpg";
				TitlerArray[6][1]="哆啦A梦";
				TitlerArray[6][2]="《哆啦A梦》";
				TitlerArray[6][3]="「真拿你没办法~」";
				TitlerArray[6][4]="<span>百宝袋</span>——每当有问题出现，掏一掏百宝袋，你就会发现问题解决了。";

				TitlerArray[7][0]="img/r8.jpg";
				TitlerArray[7][1]="野原新之助";
				TitlerArray[7][2]="《蜡笔小新》";
				TitlerArray[7][3]="「动感超人，啊哈哈哈哈」";
				TitlerArray[7][4]="<span>摇屁股</span>——脱下裤子撅起小屁屁跳舞，可是每一次都会被妈妈打。";

				TitlerArray[8][0]="img/r9.jpg";
				TitlerArray[8][1]="奥特曼";
				TitlerArray[8][2]="《奥特曼》";
				TitlerArray[8][3]="「为了维护世界和平」";
				TitlerArray[8][4]="<span>变身</span>——举起神奇的棒子即可在强光过后化身巨人！！每次打完架都会叮咚叮咚！！";

				TitlerArray[9][0]="img/r10.jpg";
				TitlerArray[9][1]="木之本樱";
				TitlerArray[9][2]="《百变小樱》";
				TitlerArray[9][3]="「隐藏着黑暗力量的钥匙啊,在我面前显示你真正的力量！现在以你的主人，小樱之名命令你——封印解除！」";
				TitlerArray[9][4]="<span>库洛牌</span>——封印着法力及生命的神秘卡牌，通过消耗魔力，发挥不同的能力！";

				var showContentr=parseInt(Math.random()*10);
				for(var i=0;i<TitlerArray.length;i++){
					if (i==showContentr) {
						tvImgr.style.backgroundImage="url("+TitlerArray[i][0]+")";
						Titler.innerHTML=TitlerArray[i][1];
						Resultr1.innerHTML=TitlerArray[i][2];
						Resultr2.innerHTML=TitlerArray[i][3];
						Resultr3.innerHTML=TitlerArray[i][4];
					}
				}

				$(".share-btn").click(function(){
					$(".share").removeAttr("style");
				});
				$(".share-bottom .share-back").click(function(){
					$(".share").attr("style","display:none;");
				});
			}

			random();
			titleResult();
		</script>
	</body>
</html>